<template>
	<view class="productInfo">
		<u-loading-page :loading="load" loading-text="loading..." bg-color="#fff"></u-loading-page>
		<u-empty mode="data" v-if="!load && !result && result.config_option"></u-empty>
		<!-- 产品详情 -->
		<tui-card>
			<template v-slot:body>
				<u-cell-group>
					<u-cell title="产品" :value="result.product_name"></u-cell>
					<u-cell title="系统" :value="result.os"></u-cell>
					<u-cell title="IP" :value="result.dedicatedip"></u-cell>
					<u-cell title="用户名" :value="result.username"></u-cell>
					<u-cell title="密码" :value="result.password"></u-cell>
					<u-cell title="支付" :value="result.payment"></u-cell>
					<u-cell title="费用" :value="result.amount"></u-cell>
				</u-cell-group>
			</template>
		</tui-card>
		<!-- 规格 -->
		<tui-card>
			<template v-slot:body>
				<u-cell-group>
					<u-cell v-for="(item,i) in result.config_option" :title="item.name" :value="item.value"></u-cell>
				</u-cell-group>
			</template>
		</tui-card>
		<!-- 操作 -->
		<tui-card>
			<template v-slot:body>
				<view style="display: flex;justify-content: space-between;padding:0 20rpx">
					<view>
						<u-button type="primary" text="开机" @click="moduleOn"></u-button>
					</view>
					<view>
						<u-button type="primary" text="关机" @click="moduleOff"></u-button>
					</view>
					<view>
						<u-button type="primary" text="重启" @click="moduleReboot"></u-button>
					</view>
					<view>
						<u-button type="primary" text="硬关机" @click="moduleHardOff"></u-button>
					</view>
					<view>
						<u-button type="primary" text="硬重启" @click="moduleHardReboot"></u-button>
					</view>
				</view>
			</template>
		</tui-card>
		<!-- 图标 -->
		<tui-card>
			<template v-slot:body>
				<u-cell-group>
					<u-cell title="点击查看产品图表" :isLink="true"></u-cell>
				</u-cell-group>
			</template>
		</tui-card>
	</view>
</template>

<script>
	import tuiCard from "@/components/thorui/tui-card/tui-card"
	export default {
		components: {
			tuiCard
		},
		data() {
			return {
				id: '',
				result: null,
				load: false
			}
		},
		methods: {
			async getProductInfoById(id) {
				this.load = true
				const result = await uni.$http.get('/v1/hosts/' + id)
				if (result.data.status !== 200) return uni.$showMsg()
				this.result = result.data.data.host
				console.log(this.result)
				this.load = false
			},
			// 开机
			async moduleOn() {
				const result = await uni.$http.put('/v1/hosts/' + this.id + '/module/on')
				console.log(result)
			},
			// 关机
			async moduleOff() {
				const result = await uni.$http.put('/v1/hosts/' + this.id + '/module/off')
				console.log(result)
			},
			// 重启
			async moduleReboot() {
				const result = await uni.$http.put('/v1/hosts/' + this.id + '/module/reboot')
				console.log(result)
			},
			// 硬关机
			async moduleHardOff() {
				const result = await uni.$http.put('/v1/hosts/' + this.id + '/module/hard_off')
				console.log(result)
			},
			// 硬重启
			async moduleHardReboot() {
				const result = await uni.$http.put('/v1/hosts/' + this.id + '/module/hard_reboot')
				console.log(result)
			}

		},
		onLoad: function(option) {
			const id = option.id
			this.id = id
			this.getProductInfoById(id)
		}
	}
</script>

<style lang="scss">
	.productInfo {
		min-height: 100vh;
		background-color: #f5f5f5;
		box-sizing: border-box;
		margin-top: -2px;
	}

	.tui-card {
		margin: 30rpx 30rpx !important;
		border-radius: 20rpx !important;

		.u-icon__icon {
			color: #3578e9 !important;
		}
	}

	/deep/.tui-card-header {
		padding: unset !important;
	}

	.u-tag-wrapper {
		/deep/.u-tag--primary--plain.data-v-1481d46d {
			border-color: unset !important
		}
	}
</style>
